CSS :has() Selektorini O'zlashtirish: Ota-ona Element Tanlash Imkoniyatini Ochish

Ko'p yillar davomida CSS dasturchilari o'zlarining ichki elementlariga asoslanib ota-ona elementlarni tanlashning oddiy va samarali usulini orzu qilishardi. Kutish nihoyasiga yetdi! :has() psevdo-klassi nihoyat paydo bo'ldi va u CSS yozish uslubimizni inqilob qilmoqda. Ushbu kuchli selektor, agar ota-ona element ma'lum bir ichki elementni o'z ichiga olsa, uni nishonga olishga imkon beradi, bu esa dinamik va moslashuvchan uslublar uchun cheksiz imkoniyatlar dunyosini ochadi.

:has() Selektori Nima?

:has() psevdo-klassi argument sifatida selektorlar ro'yxatini qabul qiluvchi CSS munosabatli psevdo-klassidir. U, agar selektorlar ro'yxatidagi har qanday selektor elementning avlodlari orasida kamida bitta elementga mos kelsa, o'sha elementni tanlaydi. Sodda qilib aytganda, u ota-ona elementda ma'lum bir ichki element bor yoki yo'qligini tekshiradi va agar bor bo'lsa, ota-ona element tanlanadi.

Asosiy sintaksis:

parent:has(child) { /* CSS qoidalari */ }

Bu faqatgina kamida bitta child elementni o'z ichiga olgan parent elementini tanlaydi.

Nima Uchun :has() Shunchalik Muhim?

An'anaga ko'ra, CSS o'z ichidagi elementlarga asoslanib ota-ona elementlarni tanlash qobiliyatida cheklangan edi. Bu cheklov ko'pincha dinamik uslublashga erishish uchun murakkab JavaScript yechimlari yoki muqobil usullarni talab qilardi. :has() selektori bu noqulay usullarga bo'lgan ehtiyojni yo'qotadi va toza, saqlashga oson va samarali CSS kodini yozish imkonini beradi.

:has() ning nima uchun o'yin qoidalarini o'zgartiruvchi ekanligi quyidagilardan iborat:

• Soddalashtirilgan Uslublash: Ilgari JavaScript talab qiladigan murakkab uslublash qoidalari endi sof CSS yordamida amalga oshirilishi mumkin.
• Yaxshilangan Qo'llab-quvvatlash: Toza va ixcham CSS kodini tushunish, tuzatish va saqlash osonroq.
• Kengaytirilgan Samaradorlik: Mahalliy CSS selektorlaridan foydalanish odatda JavaScript asosidagi yechimlarga qaraganda yaxshiroq ishlashni ta'minlaydi.
• Kattaroq Moslashuvchanlik: :has() selektori dinamik va moslashuvchan dizaynlarni yaratishda kattaroq moslashuvchanlikni ta'minlaydi.

:has() Selektorining Asosiy Misollari

:has() selektorining kuchini ko'rsatish uchun bir nechta oddiy misollardan boshlaymiz.

1-misol: Rasm Mavjudligiga Qarab Ota-ona Divni Uslublash

Tasavvur qiling, siz <div> elementiga faqat uning ichida <img> elementi bo'lganda chegara qo'shmoqchisiz:

div:has(img) { border: 2px solid blue; }

Ushbu CSS qoidasi kamida bitta <img> elementini o'z ichiga olgan har qanday <div> ga ko'k chegara qo'llaydi.

2-misol: Span Mavjudligiga Qarab Ro'yxat Elementini Uslublash

Aytaylik, sizda elementlar ro'yxati bor va agar ro'yxat elementi ma'lum bir klassga ega <span> elementini o'z ichiga olsa, uni ajratib ko'rsatmoqchisiz:

li:has(span.highlight) { background-color: yellow; }

Ushbu CSS qoidasi "highlight" klassiga ega <span> ni o'z ichiga olgan har qanday <li> ning fon rangini sariqqa o'zgartiradi.

3-misol: Kiritish Maydonining Yaroqliligiga Qarab Forma Yorlig'ini Uslublash

Siz :has() dan foydalanib, bog'langan kiritish maydoni yaroqli yoki yaroqsizligiga qarab forma yorlig'ini uslublashingiz mumkin (:invalid psevdo-klassi bilan birgalikda):

label:has(+ input:invalid) { color: red; font-weight: bold; }

Bu, agar yorliqdan keyin keladigan kiritish maydoni yaroqsiz bo'lsa, yorliqni qizil va qalin qilib ko'rsatadi.

:has() Selektorining Ilg'or Qo'llanilishlari

:has() selektori boshqa CSS selektorlari va psevdo-klasslar bilan birlashtirilganda yanada kuchliroq bo'ladi. Quyida bir nechta ilg'or qo'llash holatlari keltirilgan:

4-misol: Bo'sh Elementlarni Nishonga Olish

Siz :not() psevdo-klassini :has() bilan birgalikda ma'lum bir ichki elementga ega *bo'lmagan* elementlarni nishonga olish uchun ishlatishingiz mumkin. Masalan, rasmlarni o'z ichiga *olmagan* divlarni uslublash uchun:

div:not(:has(img)) { background-color: #f0f0f0; }

Bu <img> elementini o'z ichiga olmagan har qanday <div> ga och kulrang fon qo'llaydi.

5-misol: Murakkab Maketlarni Yaratish

:has() selektorini konteyner tarkibiga asoslangan dinamik maketlarni yaratish uchun ishlatish mumkin. Masalan, siz setka katakchasi ichidagi ma'lum bir turdagi elementning mavjudligiga qarab setka maketini o'zgartirishingiz mumkin.

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-item:has(img) { grid-column: span 2; }

Bu, agar setka elementi rasm o'z ichiga olsa, uni ikki ustun bo'ylab cho'zadi.

6-misol: Dinamik Forma Uslublash

Siz :has() dan foydalanib, forma elementlarini ularning holatiga qarab (masalan, fokuslangan, to'ldirilgan yoki yaroqli) dinamik ravishda uslublashingiz mumkin.

.form-group:has(input:focus) { box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); } .form-group:has(input:valid) { border-color: green; } .form-group:has(input:invalid) { border-color: red; }

Bu, kiritish maydoni fokuslanganda ko'k soya, yaroqli bo'lsa yashil chegara va yaroqsiz bo'lsa qizil chegara qo'shadi.

7-misol: Ichki Elementlar Soniga Qarab Uslublash

Garchi :has() to'g'ridan-to'g'ri ichki elementlar sonini sanamasa-da, siz uni boshqa selektorlar va CSS xususiyatlari bilan birlashtirib, shunga o'xshash effektlarga erishishingiz mumkin. Masalan, siz :only-child dan foydalanib, ota-ona elementda faqat bitta ma'lum turdagi ichki element bo'lsa, uni uslublashingiz mumkin.

div:has(> p:only-child) { background-color: lightgreen; }

Bu <div> ni faqatgina uning bevosita ichki elementi sifatida bitta <p> elementi bo'lsa, och yashil fon bilan uslublaydi.

Brauzerlararo Moslik va Muqobil Yechimlar

2023 yil oxiridan boshlab, :has() selektori Chrome, Firefox, Safari va Edge kabi zamonaviy brauzerlarda a'lo darajada qo'llab-quvvatlanadi. Biroq, uni ishlab chiqarishda qo'llashdan oldin, ayniqsa eski brauzerlarni qo'llab-quvvatlash kerak bo'lsa, Can I use saytida moslikni tekshirish muhim.

Quyida moslik bo'yicha ma'lumotlar keltirilgan:

• Zamonaviy brauzerlar: Chrome, Firefox, Safari va Edge'ning so'nggi versiyalarida a'lo darajada qo'llab-quvvatlanadi.
• Eski brauzerlar: Eski brauzerlarda (masalan, Internet Explorer) qo'llab-quvvatlanmaydi.

Muqobil Yechimlarni Taqdim Etish

Agar siz eski brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, muqobil yechimlarni taqdim etishingiz kerak bo'ladi. Quyida bir nechta strategiyalar keltirilgan:

• JavaScript: Brauzerning :has() ni qo'llab-quvvatlashini aniqlash uchun JavaScriptdan foydalaning va kerak bo'lsa, muqobil uslublashni qo'llang.
• Xususiyat So'rovlari: Brauzerning qo'llab-quvvatlashiga qarab turli uslublarni taqdim etish uchun CSS xususiyat so'rovlaridan (@supports) foydalaning.
• Progressiv Yaxshilash: Barcha brauzerlarda ishlaydigan asosiy, funksional dizayndan boshlang va keyin :has() ni qo'llab-quvvatlaydigan brauzerlar uchun dizaynni bosqichma-bosqich yaxshilang.

Quyida xususiyat so'rovini ishlatishga misol keltirilgan:

.parent { /* Barcha brauzerlar uchun asosiy uslublash */ border: 1px solid black; } @supports selector(:has(img)) { .parent:has(img) { /* :has() ni qo'llab-quvvatlaydigan brauzerlar uchun kengaytirilgan uslublash */ border: 3px solid blue; } }

Ushbu kod barcha brauzerlarda .parent elementiga qora chegara qo'llaydi. :has() ni qo'llab-quvvatlaydigan brauzerlarda, agar .parent elementi rasm o'z ichiga olsa, u ko'k chegara qo'llaydi.

Samaradorlik Masalalari

Garchi :has() sezilarli afzalliklarni taqdim etsa-da, uning samaradorlikka potentsial ta'sirini, ayniqsa keng qo'llanilganda yoki murakkab selektorlar bilan ishlatilganda, hisobga olish muhim. Brauzerlar sahifadagi har bir element uchun selektorni baholashi kerak, bu esa hisoblash jihatidan qimmat bo'lishi mumkin.

:has() samaradorligini optimallashtirish bo'yicha ba'zi maslahatlar:

• Selektorlarni Oddiy Saqlang: :has() psevdo-klassi ichida haddan tashqari murakkab selektorlardan foydalanishdan saqlaning.
• Qo'llash Doirasini Cheklang: :has() ni global o'rniga ma'lum elementlar yoki konteynerlarga qo'llang.
• Samaradorlikni Sinab Ko'ring: CSS qoidalaringizning ishlashini kuzatish va potentsial zaif nuqtalarni aniqlash uchun brauzer dasturchi vositalaridan foydalaning.

Yo'l Qo'yiladigan Umumiy Xatolar

:has() selektori bilan ishlaganda, kutilmagan natijalarga olib kelishi mumkin bo'lgan xatolarga yo'l qo'yish oson. Quyida oldini olish kerak bo'lgan ba'zi umumiy xatolar keltirilgan:

• Maxsuslik Muammolari: Sizning :has() qoidalaringiz boshqa CSS qoidalarini bekor qilish uchun yetarli maxsuslikka ega ekanligiga ishonch hosil qiling. Har doimgidek maxsuslikni tuzatish bosqichlaridan foydalaning.
• Noto'g'ri Ichma-ichlik: :has() selektori to'g'ri ota-ona elementni nishonga olayotganiga ishonch hosil qilish uchun elementlaringizning ichma-ichligini ikki marta tekshiring.
• Haddan Tashqari Murakkab Selektorlar: :has() psevdo-klassi ichida haddan tashqari murakkab selektorlardan foydalanishdan saqlaning, chunki bu samaradorlikka ta'sir qilishi mumkin.
• Bevosita Ichki Elementlar Deb Taxmin Qilish: Yodda tutingki, :has() faqat bevosita ichki elementlarni emas, balki *har qanday* avlodni tekshiradi. Agar siz faqat bevosita ichki elementlarni nishonga olishingiz kerak bo'lsa, bevosita ichki element kombinatoridan (>) foydalaning (masalan, div:has(> img)).

:has() dan Foydalanish Bo'yicha Eng Yaxshi Amaliyotlar

:has() selektorining afzalliklarini maksimal darajada oshirish va potentsial muammolardan qochish uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

• Oqilona Foydalaning: :has() dan faqat u boshqa CSS texnikalari yoki JavaScript yechimlariga nisbatan aniq afzallik berganida foydalaning.
• Sodda Saqlang: Murakkab, chalkash selektorlardan ko'ra oddiy, o'qilishi oson selektorlarni afzal ko'ring.
• Puxta Sinovdan O'tkazing: CSS qoidalaringizning kutilganidek ishlashiga ishonch hosil qilish uchun ularni turli brauzerlar va qurilmalarda sinab ko'ring.
• Kodingizni Hujjatlashtiring: :has() qoidalaringizning maqsadi va funksionalligini tushuntirish uchun CSS kodingizga izohlar qo'shing.
• Maxsus Imkoniyatlarni Hisobga Oling: :has() dan foydalanishingiz maxsus imkoniyatlarga salbiy ta'sir qilmasligiga ishonch hosil qiling. Masalan, muhim ma'lumotlarni yetkazish uchun faqat :has() tomonidan ishga tushirilgan uslub o'zgarishlariga tayanmang; nogironligi bo'lgan foydalanuvchilar uchun ARIA atributlari yoki muqobil mexanizmlardan foydalaning.

Haqiqiy Dunyo Misollari va Qo'llash Holatlari

Keling, :has() selektori umumiy dizayn muammolarini hal qilish uchun qanday ishlatilishi mumkin bo'lgan ba'zi real dunyo misollarini ko'rib chiqaylik.

8-misol: Moslashuvchan Navigatsiya Menyularini Yaratish

Siz :has() dan foydalanib, ma'lum menyu elementlarining mavjudligiga qarab turli ekran o'lchamlariga moslashadigan moslashuvchan navigatsiya menyularini yaratishingiz mumkin.

Foydalanuvchi tizimga kirgan yoki kirmaganligiga qarab turli navigatsiya menyusini ko'rsatmoqchi bo'lgan stsenariyni tasavvur qiling. Agar ular tizimga kirgan bo'lsa, profil va chiqish amallarini ko'rsatishingiz mumkin, aks holda kirish/ro'yxatdan o'tishni ko'rsatishingiz mumkin.

nav:has(.user-profile) { /* Tizimga kirgan foydalanuvchilar uchun uslublar */ } av:not(:has(.user-profile)) { /* Tizimdan chiqqan foydalanuvchilar uchun uslublar */ }

9-misol: Karta Komponentlarini Uslublash

:has() selektorini karta komponentlarini ularning tarkibiga qarab uslublash uchun ishlatish mumkin. Masalan, siz kartaga faqat rasm o'z ichiga olgan taqdirdagina soya qo'shishingiz mumkin.

.card:has(img) { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

10-misol: Dinamik Mavzularni Amalga Oshirish

Siz :has() dan foydalanib, foydalanuvchi afzalliklari yoki tizim sozlamalariga asoslangan dinamik mavzularni amalga oshirishingiz mumkin. Masalan, siz sahifaning fon rangini foydalanuvchi qorong'u rejimni yoqqan yoki yoqmaganligiga qarab o'zgartirishingiz mumkin.

body:has(.dark-mode) { background-color: #333; color: #fff; }

Ushbu misollar :has() selektorining ko'p qirraliligini va keng ko'lamli dizayn muammolarini hal qilish qobiliyatini ko'rsatadi.

CSS Kelajagi: Keyingisi Nima?

:has() selektorining joriy etilishi CSS evolyutsiyasida muhim bir qadamni belgilaydi. Bu dasturchilarga JavaScriptga kamroq tayanib, yanada dinamik, moslashuvchan va saqlashga oson uslublar jadvallarini yaratish imkonini beradi. :has() uchun brauzer qo'llab-quvvatlashi o'sishda davom etar ekan, biz ushbu kuchli selektorning yanada innovatsion va ijodiy qo'llanilishlarini ko'rishimizni kutishimiz mumkin.

Kelajakka nazar tashlaydigan bo'lsak, CSS Ishchi Guruhi CSS imkoniyatlarini yanada kengaytiradigan boshqa qiziqarli xususiyatlar va yaxshilanishlarni o'rganmoqda. Bularga quyidagilar kiradi:

• Konteyner So'rovlari: Komponentlarga o'z uslublarini ko'rish oynasi emas, balki o'z konteynerining o'lchamiga qarab moslashtirish imkonini beradi.
• Kaskad Qatlamlari: CSS qoidalarining kaskadi va maxsusligi ustidan ko'proq nazoratni ta'minlaydi.
• Yana Ilg'or Selektorlar: Elementlarni ularning atributlari, tarkibi va hujjat daraxtidagi o'rniga qarab nishonga oladigan yangi selektorlarni joriy etish.

So'nggi CSS ishlanmalari bilan doimo xabardor bo'lish va :has() kabi yangi xususiyatlarni o'zlashtirish orqali dasturchilar CSSning to'liq salohiyatini ochib, chinakam ajoyib veb-tajribalarni yaratishlari mumkin.

Xulosa

:has() selektori CSS vositalar to'plamiga kuchli qo'shimcha bo'lib, ota-ona elementni tanlash imkonini beradi va dinamik hamda moslashuvchan uslublash uchun yangi imkoniyatlar ochadi. Brauzer mosligi va samaradorlik oqibatlarini hisobga olish muhim bo'lsa-da, toza, saqlashga oson va samarali CSS kodi uchun :has() dan foydalanishning afzalliklari shubhasizdir. Ushbu o'yinni o'zgartiruvchi selektorni qabul qiling va bugun o'z CSS uslublaringizni inqilob qiling!

Maxsus imkoniyatlarni hisobga olishni va eski brauzerlar uchun muqobil mexanizmlarni taqdim etishni unutmang. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz :has() selektorining to'liq salohiyatidan foydalanishingiz va butun dunyo bo'ylab foydalanuvchilar uchun chinakam ajoyib veb-tajribalarni yaratishingiz mumkin.